<template>
  <a-drawer
    width="800px"
    :visible="visible"
    :bodyStyle="{ padding: '1px' }"
    :title="title"
    @close="cancel"
  >
    <div class="eip-drawer-body beauty-scroll">
      <a-spin :spinning="spinning">
        <a-form-model
          ref="form"
          :model="form"
          :rules="rules"
          :label-col="config.labelCol"
          :wrapper-col="config.wrapperCol"
        >
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="上级">
                <a-tree-select
                  placeholder="请选择上级"
                  allow-clear
                  v-model="form.parentId"
                  show-search
                  style="width: 100%"
                  treeNodeFilterProp="title"
                  :tree-data="data"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  @select="treeSelect"
                >
                </a-tree-select>
              </a-form-model-item>

              <a-form-model-item label="排序号" prop="orderNo">
                <a-input-number
                  id="inputNumber"
                  style="width: 100%"
                  placeholder="请输入排序号"
                  v-model="form.orderNo"
                  :min="0"
                  :max="999"
                />
              </a-form-model-item>
              <a-form-model-item label="禁用">
                <a-switch v-model="form.isFreeze" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="名称" prop="name">
                <a-input
                  v-model="form.name"
                  placeholder="请输入名称"
                  allow-clear
                />
              </a-form-model-item>

              <a-form-model-item label="打开类型" prop="openType">
                <a-select allow-clear v-model="form.openType">
                  <a-select-option :value="0"> 单页面 </a-select-option>
                  <a-select-option :value="1"> Iframe </a-select-option>
                  <a-select-option :value="2"> 新窗口 </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col>
              <a-form-model-item
                label="图标"
                :label-col="{ span: 2 }"
                :wrapper-col="{ span: 21 }"
              >
                <eip-icon
                  :name="form.icon"
                  :theme="form.theme"
                  @click="iconClick"
                  @clear="iconClear"
                ></eip-icon>
              </a-form-model-item>

              <a-form-model-item
                label="选项"
                :label-col="{ span: 2 }"
                :wrapper-col="{ span: 21 }"
              >
                <a-checkbox :checked="form.isShowMenu" @change="isShowMenu">
                  模块显示
                </a-checkbox>
                <a-checkbox
                  :checked="form.haveMenuPermission"
                  @change="haveMenuPermission"
                >
                  模块权限
                </a-checkbox>
                <a-checkbox
                  :checked="form.haveButtonPermission"
                  @change="haveButtonPermission"
                >
                  模块按钮权限
                </a-checkbox>
                <a-checkbox
                  :checked="form.haveDataPermission"
                  @change="haveDataPermission"
                >
                  数据权限
                </a-checkbox>
              </a-form-model-item>

              <a-form-model-item
                label="备注"
                prop="remark"
                :label-col="{ span: 2 }"
                :wrapper-col="{ span: 21 }"
              >
                <a-input
                  v-model="form.remark"
                  type="textarea"
                  placeholder="请输入备注"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-spin>
    </div>

    <div class="eip-drawer-toolbar flex justify-end align-center">
      <a-space>
        <a-button @click="cancel"><a-icon type="close" />关闭</a-button>
        <a-button
          key="submit"
          @click="saveClose"
          type="primary"
          :loading="loading"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </div>
  </a-drawer>
</template>
  
  <script>
import { save, findById, menuQuery } from "@/services/system/menu/edit";
import eipIcon from "@/pages/common/usercontrol/eip-icon";
export default {
  components: { eipIcon },
  name: "edit",
  data() {
    return {
      config: {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
      },
      form: {
        menuId: this.menuId,
        parentId: undefined,
        parentName: null,
        name: this.name,
        icon: null,
        theme: null,
        openType: 0,
        path: null,
        router: null,
        isShowMenu: false,
        haveMenuPermission: false,
        haveButtonPermission: false,
        haveDataPermission: false,
        haveFieldPermission: false,
        isFreeze: false,
        orderNo: 1,
        params: null,
        remark: null,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
      },

      loading: false,
      spinning: false,

      save: {
        continue: false,
        retain: false,
      },

      data: [],
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    menuId: {
      type: String,
    },
    name: { type: String },
  },

  mounted() {
    this.menuInit();
    this.find();
  },

  methods: {
    /**
     *
     */
    isShowMenu(e) {
      this.form.isShowMenu = e.target.checked;
    },
    /**
     *
     */
    haveMenuPermission(e) {
      this.form.haveMenuPermission = e.target.checked;
    },
    /**
     *
     */
    haveButtonPermission(e) {
      this.form.haveButtonPermission = e.target.checked;
    },
    /**
     *
     */
    haveDataPermission(e) {
      this.form.haveDataPermission = e.target.checked;
    },
    /**
     *
     */
    haveFieldPermission(e) {
      this.form.haveFieldPermission = e.target.checked;
    },

    /**
     * 树选择
     */
    treeSelect(electedKeys, e) {
      this.form.parentName = e.title;
      this.form.parentId = e.eventKey;
    },

    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 保存
     */
    saveComfirm() {
      let that = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.loading = true;
          that.$loading.show({ text: that.eipMsg.saveloading });
          that.form.router = "agilerunlist";
          that.form.path = "/agilerunlist/" + that.form.menuId;
          that.form.params = '{"id":"' + that.form.menuId + '"}';
          save(that.form).then(function (result) {
            if (result.code === that.eipResultCode.success) {
              that.$message.success(result.msg);
              that.cancel();
            } else {
              that.$message.error(result.msg);
            }
            that.loading = false;
            that.$loading.hide();
          });
        } else {
          return false;
        }
      });
    },

    /**
     * 菜单树
     */
    menuInit() {
      let that = this;
      menuQuery().then((result) => {
        that.data = result.data;
        that.spinning = false;
      });
    },
    /**
     *
     */
    saveClose() {
      this.save.continue = false;
      this.saveComfirm();
    },
    /**
     * 根据Id查找
     */
    find() {
      let that = this;
      if (this.menuId) {
        that.spinning = true;
        findById(this.menuId).then(function (result) {
          if (result.data) {
            let form = result.data;
            that.form = form;
            that.form.parentId =
              form.parentName == "" ? undefined : form.parentId;
          }
          that.spinning = false;
        });
      }
    },

    /**
     *图标点击
     */
    iconClick(icon) {
      this.form.icon = icon.name;
      this.form.theme = icon.theme;
    },

    /**
     * 清空图标
     */
    iconClear() {
      this.form.icon = null;
      this.form.theme = null;
    },
  },
};
</script>
  
  <style lang="less" scoped></style>
  